<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 600px;
            height: 200px;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div>
        <select name="" id="sel1">
        </select>
        <select name="" id="sel2">
        </select>
        <select name="" id="sel3">
            
        </select>
    </div>
</body>
</html>
<script>
    //index.html:1 Access to XMLHttpRequest at 'http://127.0.0.1:5535/'
    //from origin 'null' has been blocked by CORS policy: 
    // No 'Access-Control-Allow-Origin' 
    //header is present on the requested resource.


    const xhr = new XMLHttpRequest()
    xhr.open('get','http://127.0.0.1:7788',true)
    xhr.send()
    xhr.onload = function(){
        const sel1 = document.querySelector('#sel1')
        const sel2 = document.querySelector('#sel2')
        const sel3 = document.querySelector('#sel3')

        const address = JSON.parse(xhr.response)
        // console.log(address);
        // console.log(address);
        // address.forEach(item => {
        //     console.log(item);
        //     sel1.innerHTML = `<option>${item.AddName}</option>`
        // })
        sel1.innerHTML = address.map(item => {
            return `<option>${item.AddName}</option>`
        }).join('')

        const opt = document.querySelectorAll('option')

        sel1.onchange = function () {
            
            address.forEach(item => {
                if(sel1.value === item.AddName){
                    sel2.innerHTML = item.children.map(e => {
                        return `<option>${e.AddName}</option>`
                    }).join('')
                }
                item.children.forEach(e => {
                    if(sel2.value === e.AddName){
                        sel3.innerHTML = e.children.map(e => {
                            return `<option>${e.AddName}</option>`
                    }).join('')
                    }
                })
            })
        }

        sel2.onchange = function(){
            address.forEach(item => {
                item.children.forEach(e => {
                    if(sel2.value === e.AddName){
                        sel3.innerHTML = e.children.map(e => {
                            return `<option>${e.AddName}</option>`
                    }).join('')
                    }
                })
            })

        }

        
    }





</script>